import "./App.css";
import React from "react";
class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      isLoading: true,
    };
  }
  handleClick = () => {
    console.log("clicked");
  };
  render() {
    return (
      <div onClick={this.handleClick}>
        <p>Welcome to the home page</p>
      </div>
    );
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
    this.homeRef = React.createRef();
  }
  focusTextInput() {
    this.textInput.current.focus();
    this.homeRef.current.handleClick();
  }
  componentDidMount() {
    console.log(this.textInput);
    console.log(this.homeRef);
  }
  render() {
    return (
      <div>
        <input type="text" ref={this.textInput} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
        <Home count="0" ref={this.homeRef} />
      </div>
    );
  }
}

export default App;
